<template>
  <view class="settings-page">
    <view class="header">
      <view class="back-btn" @tap="handleBackClick">
        <text class="back-icon">&lt;</text>
      </view>
      <text class="page-title">设置</text>
    </view>
    
    <view class="settings-container">
      <!-- 通知设置 -->
      <view class="settings-group">
        <view class="group-title">通知设置</view>
        <view class="settings-list">
          <view class="settings-item">
            <view class="item-left">
              <text class="item-icon notification">&#xe677;</text>
              <text class="item-label">消息通知</text>
            </view>
            <switch 
              :checked="settings.notification" 
              @change="toggleSetting('notification')" 
              color="#38a688"
              class="custom-switch"
            />
          </view>
          <view class="settings-item">
            <view class="item-left">
              <text class="item-icon sound">&#xe678;</text>
              <text class="item-label">声音提醒</text>
            </view>
            <switch 
              :checked="settings.sound" 
              @change="toggleSetting('sound')" 
              color="#38a688"
              class="custom-switch"
            />
          </view>
          <view class="settings-item">
            <view class="item-left">
              <text class="item-icon vibrate">&#xe679;</text>
              <text class="item-label">振动提醒</text>
            </view>
            <switch 
              :checked="settings.vibrate" 
              @change="toggleSetting('vibrate')" 
              color="#38a688"
              class="custom-switch"
            />
          </view>
        </view>
      </view>
      
      <!-- 隐私设置 -->
      <view class="settings-group">
        <view class="group-title">隐私设置</view>
        <view class="settings-list">
          <view class="settings-item" @tap="navigateTo('privacy')">
            <view class="item-left">
              <text class="item-icon privacy">&#xe67a;</text>
              <text class="item-label">隐私政策</text>
            </view>
            <text class="item-arrow">›</text>
          </view>
          <view class="settings-item" @tap="navigateTo('permission')">
            <view class="item-left">
              <text class="item-icon permission">&#xe67b;</text>
              <text class="item-label">权限管理</text>
            </view>
            <text class="item-arrow">›</text>
          </view>
        </view>
      </view>
      
      <!-- 通用设置 -->
      <view class="settings-group">
        <view class="group-title">通用设置</view>
        <view class="settings-list">
          <view class="settings-item" @tap="navigateTo('account')">
            <view class="item-left">
              <text class="item-icon account">&#xe681;</text>
              <text class="item-label">账号设置</text>
            </view>
            <text class="item-arrow">›</text>
          </view>
          <view class="settings-item" @tap="navigateTo('language')">
            <view class="item-left">
              <text class="item-icon language">&#xe67c;</text>
              <text class="item-label">语言设置</text>
            </view>
            <view class="item-right">
              <text class="item-value">简体中文</text>
              <text class="item-arrow">›</text>
            </view>
          </view>
          <view class="settings-item" @tap="clearCache">
            <view class="item-left">
              <text class="item-icon cache">&#xe67d;</text>
              <text class="item-label">清除缓存</text>
            </view>
            <view class="item-right">
              <text class="item-value">{{ cacheSize }}</text>
              <text class="item-arrow">›</text>
            </view>
          </view>
          <view class="settings-item" @tap="checkUpdate">
            <view class="item-left">
              <text class="item-icon update">&#xe67e;</text>
              <text class="item-label">检查更新</text>
            </view>
            <view class="item-right">
              <text class="item-value">当前版本：{{ appVersion }}</text>
              <text class="item-arrow">›</text>
            </view>
          </view>
        </view>
      </view>
      
      <!-- 关于我们 -->
      <view class="settings-group">
        <view class="group-title">关于我们</view>
        <view class="settings-list">
          <view class="settings-item" @tap="navigateTo('about')">
            <view class="item-left">
              <text class="item-icon about">&#xe67f;</text>
              <text class="item-label">关于康怡</text>
            </view>
            <text class="item-arrow">›</text>
          </view>
          <view class="settings-item" @tap="callCustomService">
            <view class="item-left">
              <text class="item-icon service">&#xe680;</text>
              <text class="item-label">联系客服</text>
            </view>
            <text class="item-arrow">›</text>
          </view>
        </view>
      </view>
      
      <!-- 退出登录 -->
      <view class="logout-container">
        <view class="logout-btn" @tap="logout">
          <text>注销账号</text>
        </view>
      </view>
      
      <!-- 版本信息 -->
      <view class="app-info">
        <image class="app-logo" src="/static/logo.png" mode="aspectFit"></image>
        <text class="app-name">康怡养老 {{ appVersion }}</text>
        <text class="copyright">© 2023 康怡养老 All Rights Reserved</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';

// 设置项
const settings = ref({
  notification: true,
  sound: true,
  vibrate: false
});

// 缓存大小
const cacheSize = ref('56.7MB');

// 应用版本
const appVersion = ref('1.0.0');

// 处理返回按钮点击
const handleBackClick = () => {
  uni.navigateBack({
    delta: 1
  });
};

// 页面导航
const navigateTo = (page) => {
  if (page === 'account') {
    uni.navigateTo({
      url: '/pages/profile/settings/account'
    });
    return;
  }
  
  uni.showToast({
    title: `跳转到${page}页面`,
    icon: 'none'
  });
  
  // 实际应用中应该跳转到对应页面
  // uni.navigateTo({
  //   url: `/pages/profile/settings/${page}`
  // });
};

// 切换设置状态
const toggleSetting = (key) => {
  settings.value[key] = !settings.value[key];
  
  uni.showToast({
    title: `${settings.value[key] ? '启用' : '关闭'}${key}设置`,
    icon: 'none'
  });
};

// 清除缓存
const clearCache = () => {
  uni.showModal({
    title: '提示',
    content: '确定要清除缓存吗？',
    success: (res) => {
      if (res.confirm) {
        uni.showLoading({
          title: '清理中...'
        });
        
        setTimeout(() => {
          uni.hideLoading();
          cacheSize.value = '0KB';
          
          uni.showToast({
            title: '清除成功',
            icon: 'success'
          });
        }, 1500);
      }
    }
  });
};

// 检查更新
const checkUpdate = () => {
  uni.showLoading({
    title: '检查中...'
  });
  
  setTimeout(() => {
    uni.hideLoading();
    
    uni.showModal({
      title: '检查更新',
      content: '当前已是最新版本',
      showCancel: false
    });
  }, 1500);
};

// 联系客服
const callCustomService = () => {
  uni.showModal({
    title: '联系客服',
    content: '确定要拨打客服热线 400-123-4567 吗？',
    success: (res) => {
      if (res.confirm) {
        uni.makePhoneCall({
          phoneNumber: '4001234567',
          fail: () => {
            uni.showToast({
              title: '拨打电话失败',
              icon: 'none'
            });
          }
        });
      }
    }
  });
};

// 退出登录
const logout = () => {
  uni.showModal({
    title: '注销账号',
    content: '注销后，账号数据将无法恢复！确定要注销账号吗？',
    confirmColor: '#f44336',
    success: (res) => {
      if (res.confirm) {
        // 二次确认
        uni.showModal({
          title: '二次确认',
          content: '请再次确认，注销账号操作不可撤销！',
          confirmColor: '#f44336',
          success: (res) => {
            if (res.confirm) {
              uni.showLoading({
                title: '处理中...'
              });
              
              setTimeout(() => {
                uni.hideLoading();
                
                // 清除本地存储
                uni.clearStorageSync();
                
                // 返回登录页
                uni.reLaunch({
                  url: '/pages/login/index'
                });
              }, 2000);
            }
          }
        });
      }
    }
  });
};
</script>

<style lang="scss">
page {
  background-color: #f5f5f5;
  min-height: 100%;
}

.settings-page {
  min-height: 100vh;
  padding-bottom: 30px;
  
  .header {
    position: relative;
    padding: 15px;
    background-color: #fff;
    border-bottom: 1px solid rgba(120, 194, 173, 0.1);
    display: flex;
    justify-content: center;
    align-items: center;
    
    .back-btn {
      position: absolute;
      left: 15px;
      top: 50%;
      transform: translateY(-50%);
      width: 30px;
      height: 30px;
      display: flex;
      justify-content: center;
      align-items: center;
      
      .back-icon {
        font-size: 20px;
        font-weight: bold;
        color: #38a688;
      }
    }
    
    .page-title {
      font-size: 18px;
      font-weight: 600;
      color: #38a688;
    }
  }
  
  .settings-container {
    padding: 15px;
    
    // 设置分组
    .settings-group {
      margin-bottom: 20px;
      
      .group-title {
        font-size: 15px;
        font-weight: 500;
        color: #8d6e63;
        margin-bottom: 10px;
        padding-left: 10px;
      }
      
      .settings-list {
        background-color: #fff;
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        
        .settings-item {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 16px;
          border-bottom: 1px solid rgba(141, 110, 99, 0.05);
          
          &:last-child {
            border-bottom: none;
          }
          
          .item-left {
            display: flex;
            align-items: center;
            
            .item-icon {
              width: 24px;
              height: 24px;
              font-family: 'iconfont';
              font-size: 20px;
              display: flex;
              justify-content: center;
              align-items: center;
              margin-right: 12px;
              
              &.account { color: #5D4037; }
              &.password { color: #FF9800; }
              &.phone { color: #2196F3; }
              &.notification { color: #F44336; }
              &.sound { color: #9C27B0; }
              &.vibrate { color: #FF5722; }
              &.privacy { color: #795548; }
              &.permission { color: #607D8B; }
              &.language { color: #009688; }
              &.cache { color: #00BCD4; }
              &.update { color: #4CAF50; }
              &.about { color: #8BC34A; }
              &.service { color: #CDDC39; }
            }
            
            .item-label {
              font-size: 15px;
              color: #5d4037;
            }
          }
          
          .item-right {
            display: flex;
            align-items: center;
            
            .item-value {
              font-size: 13px;
              color: #8d6e63;
              margin-right: 6px;
            }
          }
          
          .item-arrow {
            font-size: 20px;
            color: #bcaaa4;
            margin-left: 6px;
          }
          
          .custom-switch {
            transform: scale(0.9);
          }
        }
      }
    }
    
    // 退出登录按钮
    .logout-container {
      margin: 30px 0;
      
      .logout-btn {
        height: 44px;
        background-color: #fff;
        border-radius: 12px;
        display: flex;
        justify-content: center;
        align-items: center;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        
        text {
          font-size: 16px;
          font-weight: 500;
          color: #f44336;
        }
      }
    }
    
    // 应用信息
    .app-info {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-top: 30px;
      
      .app-logo {
        width: 60px;
        height: 60px;
        border-radius: 15px;
        margin-bottom: 10px;
      }
      
      .app-name {
        font-size: 15px;
        font-weight: 500;
        color: #5d4037;
        margin-bottom: 8px;
      }
      
      .copyright {
        font-size: 12px;
        color: #bcaaa4;
      }
    }
  }
}
</style> 